時光飛逝，又來到一年一度的鐵人賽，這是一個絕佳的機會和動機，來整理過去的知識和經驗，除了可以強化自己的記憶之外，分享出來也是一種回饋知識社群的方式。

前言

回顧過去兩年參賽的內容是偏向 PHP 程式語言後端方面的主題，今年選擇 「Modern Web」組別，則是因為工作上在前端的工作量比重較高，堆積在腦海裡的點子較多。曾經一度在選擇現成的 Slider 套件不符合行動裝置版本上的實作需求，而有想自己重刻套件的想法。

「重造會 Slide 的輪子！深入 JavaScript CSS 模組化設計」因應而生，即使現成 Slider / Carousel 套件已經非常多，但我們仍可以藉由重造輪子，研究其中的原理，把學過的前端知識都用上。這一顆會滑的輪子需要 CSS 屬性 Flex、Transform 大量運用，以及配合 JavaScript 的模組化設計，最後在第 30 天讓它成為可以讓人安裝的輪子 (NPM 套件)，讓我們來試試吧！

適合的讀者

• 沒有前端基礎，但稍微知道 HTML 與基本 CSS 語法的人。
• 有一定前端基礎，想瞭解從無到有，設計出一個 JavaScript 套件的人。

閱讀提示

為了幫助讀者更好閱讀本系列文章，在內容上做了統一的規範，如下：

• 使用全型上括號 (「) 以及全型下括號 (」) 在要強調的字詞上。
• 第一次出現的專有名稱會使用 (「) 以及全型下括號 (」) 並搭配英文。
• HTML 的語法標籤，將會統一使用 <div> 這樣的方式提示。
• CSS 的語法屬性，將會統一使用斜體字，例如 width。
• CSS 的語法屬性加上值，將會統一使用 width: 100% 。
• 程式碼皆以圖片顯示，以達手機版閱讀最佳效果。

內容大綱

在本系列的 30 篇文章的出發點是為了讓讀者了解，其實套件的設計，上架到 NPM 套件庫中並不是很困難的事情，藉由創作屬於自己的作品產生成就感，培養出不斷想自我精進技術的熱情。

主要內容有三大方向。

CSS

全名為「階層式樣式表」(cascading style sheets)，多虧了它，我們的網頁才有豐富的色彩、字型、間距、動畫以及空間佈局有更細微的控制，如果你是畫家，那麼 CSS 就是就是顏料，在名為 HTML 的畫布上揮灑你的才華，於是一幅炫麗的作品誕生了。

由於 CSS 的屬性和各種屬性的功能值非常多，在這一系統只會介紹到達成 Slider 套件會用到的屬性。

JavaScript

在這一系列將介紹如何透過 JavaScript 動態地改變 HTML 上的 CSS 屬性，達成整個 Slider 動起來，並設計適當的「參數」 (configuration parameters) 及 API、「監聽事件」 (event)。

套件規劃

除了發佈套件的步驟，最基本的是營造會有人用的期待感。想像以後是否會有協作的開發者一起加入的話，Coding Style 的規範及工具選擇等等，都在討論範圍內。

雖然要白天上班，30 天連續下班後寫文章是一個挑戰，不過我會加油盡量把它完成。

讓我們開始吧 ^^